<template>
  <div class="product-details">
    <div class="header">
      <div class="contain-left">
        <span class="back" @click="goBack"><i class="iconfont icon-fanhui" style="font-size: 24px;"></i></span>
        <span class="title">{{ productName }}</span>
        <div class="status" :class="{ 'dep-completed': developStatus == 1 }">
          <div class="status-icon"></div>
          <div>{{ developStatus == 1 ? '开发完成' : '开发中' }}</div>
        </div>
      </div>
      <div>
        <el-button
          :disabled="rolesCode !== 'CUSTOM_ADMIN' && rolesCode !== 'PRODUCT'"
          type="primary"
          size="14"
          class="btn"
          @click="releaseProduct">{{ developStatus == 1 ? '返回开发' : '发布产品'
          }}</el-button>
      </div>
    </div>
    <div class="tabs">
      <div
        v-for="tab in tabs"
        :key="tab.index"
        class="tab-pane"
        :class="[{ 'tab-active': activeName === tab.index }]"
        @click="handleTabs(tab.index)">
        <div>
          <span class="num">{{ tab.num }}</span>
          <span>{{ tab.title }}</span>
        </div>
      </div>
    </div>
    <div class="contain">
      <component
        :is="tab.component"
        v-for="tab in tabs"
        v-if="activeName === tab.index"
        :key="tab.index"></component>
    </div>
  </div>
</template>
<script>
import productDefine from "./productDefine"
import functionDefine from "./functionDefine"
import appPlug from "./appPlug"
import firmware from "./firmware/index.vue"
import productionConfig from "./productionConfig"
import productionTest from "./productionTest"
import { publishProduct, productStatus } from '@/api/product/product-details'
import { mapGetters } from 'vuex'

export default {
  name: 'productDetails',
  components: { productDefine, functionDefine, appPlug, firmware, productionConfig, productionTest },
  data() {
    return {
      activeName: 1, // 显示详情列表索引
      tabs: [
        { index: 1, num: '01', title: '产品信息', component: 'productDefine' },
        { index: 2, num: '02', title: '功能定义', component: 'functionDefine' },
        // { index: 3, num: '03', title: 'APP插件', component: 'appPlug' },
        { index: 3, num: '03', title: '固件开发', component: 'firmware' },
        { index: 4, num: '04', title: '产品配置', component: 'productionConfig' },
        { index: 5, num: '05', title: '产品测试', component: 'productionTest' }
      ],
      developStatus: '', // 开发状态
      productName: '', //产品名称
      productId: '' // 产品id
    }
  },
  computed: {
    ...mapGetters(['rolesCode'])
  },
  created() {
    this.developStatus = this.$route.query.developStatus
    this.productName = this.$route.query.productName
    this.productId = this.$route.query.productId
    this.currentPage = this.$route.query.currentPage
    this.activeName = parseInt(sessionStorage.getItem('activeName')) || 1
  },
  destroyed() {
    const url = this.$route.path
    if (!url.includes('/product/product-details/')) {
      sessionStorage.removeItem('activeName')
    }
  },
  methods: {
    // 发布产品和返回开发
    releaseProduct() {
      if (this.developStatus === '1') { // 返回开发
        const params = {
          productId: this.productId,
          developStatus: 0
        }
        productStatus(params).then(res => {
          this.$message.success('返回成功')
          this.$router.push({
            path: '/product/product-list/index'
          })
        }).catch(err => {
          this.$message.error(err.message)
        })
      } else { // 发布产品
        publishProduct(this.productId).then(res => {
          this.$message.success('发布成功')
          this.$router.push({
            path: '/product/product-list/index'
          })
        }).catch(err => {
          this.$message.error(err.message)
        })
      }
    },
    goBack() {
      this.$router.push({ path: '/product/product-list/index' })
      sessionStorage.removeItem('activeName')
    },

    handleTabs(tab) {
      this.activeName = tab
      sessionStorage.setItem('activeName', this.activeName)
    }
  }
}
</script>
<style lang="scss" scoped>
.product-details {
  height: 100%;

  .header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 26px;

    .contain-left {
      display: flex;
      align-items: center;

      .back {
        cursor: pointer;
      }

      .title {
        font-weight: 600;
        color: #333333;
        font-size: 18px;
        margin-left: 13px;
        margin-right: 24px;
      }

      .status {
        padding: 3px 8px;
        background: rgba(12, 163, 209, 0.15);
        border-radius: 18px 18px 18px 18px;
        display: flex;
        align-items: center;
        font-weight: 400;
        color: #0CA3D1;
        font-size: 14px;

        .status-icon {
          width: 6px;
          height: 6px;
          background: #0CA3D1;
          border-radius: 6px;
          margin-right: 6px;
        }
      }

      .dep-completed {
        background-color: rgba(39, 95, 232, 0.1);
        color: #275FE8;

        .status-icon {
          background-color: #275FE8;
        }
      }
    }

    .btn {
      margin-left: 20px;
    }
  }

  .tabs {
    display: flex;
    height: 36px;
    line-height: 36px;
    font-size: 14px;
    margin-bottom: 32px;

    .tab-pane {
      flex: 1;
      margin: 0 2px;
      background: #F7F7F9;
      border-radius: 2px 2px 2px 2px;
      padding: 0 8px 0 14px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .num {
        margin-right: 10px;
      }

      img {
        width: 20px;
        height: 20px;
      }
    }

    .tab-pane:first-child {
      margin-left: 0;
    }

    .tab-pane:last-child {
      margin-right: 0;
    }

    .tab-active {
      background: #E9EFFD;
      font-weight: 600;
      color: #275FE8;
    }
  }

  .contain {
    height: calc(100% - 126px);
  }
}
</style>
